<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span {
            background: linear-gradient(to bottom, #46F7F5, #0BB1FF);
            -webkit-background-clip: text;
            color: transparent;
        }

        input[type="range"] {
            /*-webkit-box-shadow: 0 1px 0 0px #424242, 0 1px 0 #060607 inset, 0px 2px 10px 0px black inset, 1px 0px 2px rgba(0, 0, 0, 0.4) inset, 0 0px 1px rgba(0, 0, 0, 0.6) inset;*/
            -webkit-appearance: none;
            /*去除默认样式*/
            margin-top: 42px;
            background-color: #ebeff4;
            /*border-radius: 15px;*/
            width: 100px !important;
            outline: none;
            -webkit-appearance: none;
            height: 4px;
            padding: 0;
            border: none;
            transform: rotate(90deg);
            /*input的长度为80%，margin-left的长度为10%*/
        }

        input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            /*去除默认样式*/
            cursor: default;
            top: 0;
            height: 20px;
            width: 20px;
            transform: translateY(0px);
            /*background: none repeat scroll 0 0 #5891f5;*/
            background: #fff;
            border-radius: 15px;
            border: 5px solid #006eb3;
            /*-webkit-box-shadow: 0 -1px 1px #fc7701 inset;*/
        }
    </style>
</head>

<body>
    <input id="snrPollInterval" value="100" type="range" min="1" max="100">
    <span>这个bai字体的du颜色就zhi是渐变dao色的</span>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script>

        //滑动时的样式
        $.fn.RangeSlider = function (cfg) {
            this.sliderCfg = {
                min: cfg && !isNaN(parseFloat(cfg.min)) ? Number(cfg.min) : null,
                max: cfg && !isNaN(parseFloat(cfg.max)) ? Number(cfg.max) : null,
                step: cfg && Number(cfg.step) ? cfg.step : 1,
                callback: cfg && cfg.callback ? cfg.callback : null
            };

            var $input = $(this);
            var min = this.sliderCfg.min;
            var max = this.sliderCfg.max;
            var step = this.sliderCfg.step;
            var callback = this.sliderCfg.callback;

            $input.attr('min', min)
                .attr('max', max)
                .attr('step', step);

            $input.bind("input", function (e) {
                console.log(this.value)
                $input.attr('value', this.value);
                $input.css('background', 'linear-gradient(to right, #059CFA, #ebeff4 ' + this.value + '%, #ebeff4)');

                if ($.isFunction(callback)) {
                    callback(this);
                }
            });
        };
        $('#snrPollInterval').RangeSlider({ min: 0, max: 100, step: 1, callback: '' });//#snrPollInterval为input的id名


    </script>
</body>

</html>